<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scal=1,shrink-to-fit=no">

    <title>boostrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"  crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"  crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"  crossorigin="anonymous"></script>
<!--    <script src="../js/autoQR.js"></script>-->
</head>
<body onload="change()">
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置浏览器大小查看效果!</p>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <h3>第一列</h3>
            <p>菜鸟教程</p>
            <p id="pp" >学的不仅是技术，更是梦想！！！</p>
        </div>
        <div class="col-sm-4">
            <h3>第二列</h3>
            <p>菜鸟教程..</p>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
        <div class="col-sm-4">
            <h3>第三列</h3>
            <p>菜鸟教程..</p>
            <p>学的不仅是技术，更是梦想！！！</p>
        </div>
    </div>
</div>

<script>

    $("#pp").click(function () {
        $("#pp")[0].innerHTML = "test";
        // alert("11");
    });
    function change(){
        // $("#pp").innerHTML = "test";
        // $("#pp").hide();
        // document.getElementById("pp").innerHTML="New text!";

        // alert('11');
    }

</script>
</body>
</html>